<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<%@ include file="../common/required.jspf" %>
		<meta charset="utf-8" />
		<title>网上书城-书籍清单</title>
		<link rel="stylesheet" type="text/css" href="${ctx }/statics/common/vendor/normalize.min.css" />
		<link rel="stylesheet" href="${ctx }/statics/common/vendor/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" href="${ctx }/statics/common/vendor/swiper/swiper.min.css" />
		<link rel="stylesheet" href="${ctx }/statics/store/css/common.css" />
		<link rel="stylesheet" href="${ctx }/statics/store/css/address.css" />
		<link rel="stylesheet" href="${ctx }/statics/store/css/index.css" />
		<link rel="apple-touch-icon" href="${ctx}/statics/store/img/apple-touch-icon.png">
		<link rel="icon" href="${ctx}/favicon.ico">
		<script src="${ctx}/statics/common/vendor/jquery.min.js"></script>
	</head>

	<body>
		<%@ include file="../common/header.jspf" %>
		
		<!-- first -->
		<section style="width: 100%; height: .6rem;"></section>
		<section class="index-banner swiper-container" id="appendyy">
		
		</section>
		<section class="address-container">
		<form action="${ctx }/shopping/product/listAllProducts">
		<div class="container-message">
			<div style="font-size: .17rem;" class="message-inner">
				<div style="height:.45rem">
					<div style="float: right;width: 50%;line-height: .45rem;vertical-align: middle;margin-right: .15rem">
						<div style="float: left;width: 100%"><input name="name" style="height:.23rem;padding:.05rem .1rem;" type="text" placeholder="请输入查询的书籍名称" /></div>
					</div>
					<div style="float: left;width: 40%">
						<select name="flag" style="width: 80%" name="privence">
				    			<option value="0">--请选择书籍种类--</option>
				    			<option value="1">普通</option>
				    			<option value="2">专属</option>
				    			<option value="3">热销</option>
				    	</select>
				    </div>
			    </div>
			    <div style="height:.45rem">
					<div style="float: left;width: 40%">
						<select name="price" style="width: 80%" name="privence">
				    			<option value="0">--请选择价格区间种类--</option>
				    			<option value="1">&lt;100</option>
				    			<option value="2">100&lt;=N&lt;200</option>
				    			<option value="3">200&lt;=N&lt;300</option>
				    			<option value="4">&gt;=300</option>
				    	</select>
				    </div>
				    <div style="float: right;width: 50%;line-height: .45rem;vertical-align: middle;margin-right: .15rem">
						<div style="float: left;width: 100%"><input style="height:.35rem;" type="submit"  value="搜索" id="submit" /></div>
					</div>
			    </div>
			</div>
		</div>
		</form>
		</section>
		
		<!-- second -->
		<section class="index-main" id="appendxx">
			<c:forEach items="${showPageAllProducts.list}" var="product" varStatus="v">
				<a href="${ctx }/shopping/product/productInfo?productId=${product.id} ">
					<div class="main-list">
						<img src="${ctx }/statics/store/img/product1.png" />
						<div style="border-bottom: .6rem solid ${product.color }" class="trangle-exclusive">
							<div class="trangle-text">
								<span>${product.flagStr }</span>
							</div>
						</div>
	
						<div class="list-right">
							<p class="title">${product.name }</p>
							<p class="details">${product.description }</p>
							<p class="price">价格:<span>￥${product.price }</span></p>
						</div>
					</div>
				</a>
			 </c:forEach>
		</section>
		<div style="width:100%;height:.5rem;text-align:center"><span id="logSpan" style="font-size: .16rem;color:#999999">没有了~</span></div>

		<c:set var = "ctx" value = "<%=request.getContextPath()%>"></c:set>
		<script src="${ctx }/statics/store/js/resize.js"></script>
		<script src="${ctx }/statics/common/vendor/zepto.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper.animate1.0.2.min.js"></script>
		<script src="${ctx }/statics/common/vendor/hammer.min.js"></script>
		
		<script type="text/javascript">
		var producList = {
			init: function(){
				producList.changePage();
				producList.logSpan = $('#logSpan');
				producList.lazyLoad();
			},
			changePage: function(){
				$(".header-list li").removeClass("list-active");
				$("#productPage").addClass("list-active");
			},
		
			lazyLoad: function(){
				var flag = true;
			    var pageNo = 10;
			    $(window).scroll(function () {
			        var distance = $(document).height() - ($(window).scrollTop() + $(window).height());
			        if ((distance <= 40) && flag) {
			            flag = false;
			            pageNo += 10;
			            producList.logSpan.text("加载中...");
			            setTimeout(function(){
			            	  $.get(window.ctx+'/shopping/product/queryAllProduct?pageNo=' + pageNo, 
			  			            function (data) {
			  			                if (data.length == 0) {
			  			                	producList.logSpan.text("没有了~");
			  			                    return;
			  			                }else{
			  				                var html = [];
			  				                for (var i = 0; i < data.length; i++) {
			  				                    html.push('<a href="'+window.ctx+'/shopping/product/productInfo?productId='+ data[i].id +'">');
			  				                    html.push('		<div class="main-list">');
			  				                    html.push('			<img src="'+window.ctx+'/statics/store/img/product1.png" />');
			  				                    html.push('		<div style="border-bottom: .6rem solid '+ data[i].color +'" class="trangle-exclusive">');
			  				                    html.push('		<div class="trangle-text">');
			  				                    html.push('			<span>'+data[i].flagStr+'</span>');
			  				                    html.push('		</div>');
			  				                    html.push('</div>');
			  				                    html.push('<div class="list-right">');
			  				                    html.push('		<p class="title">'+data[i].name+'</p>');
			  				                    html.push('		<p class="details">'+data[i].description+'</p>');
			  				                    html.push('		<p class="price">价格:<span>￥'+data[i].price+'</span></p>');
			  				                    html.push('		</div>');
			  				                    html.push('	</div>');
			  				                    html.push('</a>');
			  				                }
			  				                $('#appendxx').append(html.join(''));
			  				              	producList.logSpan.text("没有了~");
			  			                }
			  			            });
			            },1000);
			          
			        };
			        if (distance > 50) {
			            flag = true;
			        }
			    });
			}
			
			
		}
	  

	$(function() {
		var mySwiper = new Swiper('.swiper-container', {
		loop: true,
		autoplay: 5000,
		});
		window.ctx = '${ctx}'; 
		producList.init();
		
	})
		</script>

		
	</body>

</html>